<!DOCTYPE html>
<html>
<head>
    <title>历史</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <#--样式-->
    <link rel="stylesheet" media="screen" href="${request.contextPath}/css/style.css">
    <#--layui-->
    <link rel="stylesheet" media="screen" href="${request.contextPath}/layui/css/layui.css">

</head>
<body >





    <div class="content" >



       <div >
           <#--月亮放置区-->
           <div class="light" style="cursor:pointer;" onclick="window.location.href = '/history/'">
           </div>

           <hr class="line-left">
           <hr class="line-right">

           <div class="main">
               <h1 class="title">新增事件</h1>
           </div>




           <div class="textContent" style="padding-bottom: 300px;">

               <div style="width: 900px;">

                   <form class="layui-form" id="formEventOccur">


                       <blockquote class="layui-elem-quote layui-quote-nm">
                           时间框定是为了定位事件发生的具体时间。<br/>
                           提供了四种时间策略：
                           <ul>
                               <li>1 只填写月份。事件只具体到月份，无法定位到具体发生的日期，这种类型的多用于《新唐书》等史书，只记录事件到月份。</li>
                               <li>2 填写月份和日期。可以定位到具体发生在哪一天。</li>
                               <li>3 只填写季节。这种多用于《新唐书》等史书，事件发生的时间一般都是XX年春，XX年夏，发生某事。</li>
                               <li>4 不填写月份、日期、季节任何信息。这种事件一般只能确定在某一年发生的事件，完全无法定位到具体的时间。</li>
                           </ul>
                       </blockquote>
                       <hr class="layui-bg-orange">


                       <fieldset class="layui-elem-field layui-field-title">
                           <legend>框定时间</legend>
                       </fieldset>

                       <div class="layui-form-item">
                           <label class="layui-form-label">历史主线</label>
                           <div class="layui-input-block">
                               <select name="historyId" lay-filter="aihao" lay-search>
                                   <option value="">请选择历史主线</option>
                                   <#if historyMainList??>
                                       <#list historyMainList as historyMain>
                                           <#if historyMain??>
                                               <#if historyMain.ad == 1>
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元元年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元元年</option>
                                                   </#if>

                                               <#elseif historyMain.ad < 0>
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元前 ${historyMain.ad!''} 年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元前 ${historyMain.ad!''} 年</option>
                                                   </#if>

                                               <#else >
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元 ${historyMain.ad!''} 年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元 ${historyMain.ad!''} 年</option>
                                                   </#if>

                                               </#if>
                                           </#if>
                                       </#list>
                                   </#if>
                               </select>
                           </div>
                       </div>


                       <div class="layui-form-item">
                           <label class="layui-form-label">月份</label>
                           <div class="layui-input-block">
                               <select name="month" lay-filter="aihao" lay-search>
                                   <option value="">事件发生的月份</option>
                                   <option value="1">一 月(1月)</option>
                                   <option value="2">二 月(2月)</option>
                                   <option value="3">三 月(3月)</option>
                                   <option value="4">四 月(4月)</option>
                                   <option value="5">五 月(5月)</option>
                                   <option value="6">六 月(6月)</option>
                                   <option value="7">七 月(7月)</option>
                                   <option value="8">八 月(8月)</option>
                                   <option value="9">九 月(9月)</option>
                                   <option value="10">十 月(10月)</option>
                                   <option value="11">十一 月(11月)</option>
                                   <option value="12">十二 月(12月)</option>
                               </select>
                           </div>
                       </div>
                       <div class="layui-form-item">
                           <label class="layui-form-label">天|日期</label>
                           <div class="layui-input-block">
                               <select name="dateOccur" lay-filter="aihao" lay-search>
                                   <option value="">事件发生在哪一天</option>
                                   <option value="1">一 号(1日)</option>
                                   <option value="2">二 号(2日)</option>
                                   <option value="3">三 号(3日)</option>
                                   <option value="4">四 号(4日)</option>
                                   <option value="5">五 号(5日)</option>
                                   <option value="6">六 号(6日)</option>
                                   <option value="7">七 号(7日)</option>
                                   <option value="8">八 号(8日)</option>
                                   <option value="9">九 号(9日)</option>
                                   <option value="10">十 号(10日)</option>
                                   <option value="11">十一 号(11日)</option>
                                   <option value="12">十二 号(12日)</option>
                                   <option value="13">十三 号(13日)</option>
                                   <option value="14">十四 号(14日)</option>
                                   <option value="15">十五 号(15日)</option>
                                   <option value="16">十六 号(16日)</option>
                                   <option value="17">十七 号(17日)</option>
                                   <option value="18">十八 号(18日)</option>
                                   <option value="19">十九 号(19日)</option>
                                   <option value="20">二十 号(20日)</option>
                                   <option value="21">二十一 号(21日)</option>
                                   <option value="22">二十二 号(22日)</option>
                                   <option value="23">二十三 号(23日)</option>
                                   <option value="24">二十四 号(24日)</option>
                                   <option value="25">二十五 号(25日)</option>
                                   <option value="26">二十六 号(26日)</option>
                                   <option value="27">二十七 号(27日)</option>
                                   <option value="28">二十八 号(28日)</option>
                                   <option value="29">二十九 号(29日)</option>
                                   <option value="30">三十 号(30日)</option>
                                   <option value="31">三十一 号(31日)</option>
                               </select>
                           </div>
                       </div>
                       <div class="layui-form-item">
                           <label class="layui-form-label">季节</label>
                           <div class="layui-input-block">
                               <select name="seasons" lay-filter="aihao" lay-search>
                                   <option value="">请选择季节</option>
                                   <option value="1">春</option>
                                   <option value="2">夏</option>
                                   <option value="3">秋</option>
                                   <option value="4">冬</option>
                               </select>
                           </div>
                       </div>
                       <hr class="layui-bg-orange">


                       <fieldset class="layui-elem-field layui-field-title">
                           <legend>添加事件</legend>
                       </fieldset>
                       <div class="layui-form-item layui-form-text">
                           <label class="layui-form-label">事件</label>
                           <div class="layui-input-block">
                               <textarea placeholder="请输入发生的事件，必填" lay-verify="required" required name="content" class="layui-textarea"></textarea>
                           </div>
                       </div>
                       <hr class="layui-bg-orange">





                       <fieldset class="layui-elem-field layui-field-title">
                           <legend>附加信息</legend>
                       </fieldset>


                       <div class="layui-form-item">
                           <label class="layui-form-label">地点</label>
                           <div class="layui-input-block">
                               <input type="text" name="place" lay-verify="title" autocomplete="off" placeholder="事件发生地点" class="layui-input">
                           </div>
                       </div>
                       <div class="layui-form-item">
                           <label class="layui-form-label">中国史|外国史</label>
                           <div class="layui-input-block">
                               <input type="radio" name="abroadOrHome" value="1" title="国内" checked>
                               <input type="radio" name="abroadOrHome" value="2" title="国外">
                           </div>
                       </div>
                       <div class="layui-form-item">
                           <label class="layui-form-label">是否重大事件</label>
                           <div class="layui-input-block">
                               <input type="radio" name="important" value="1" title="普通事件" checked>
                               <input type="radio" name="important" value="2" title="重大事件">
                           </div>
                       </div>


                       <br/>
                       <br/>


                       <div class="layui-form-item">
                           <div class="layui-input-block">
                               <button class="layui-btn" lay-submit lay-filter="addEventOccur">提交</button>
                               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                           </div>
                       </div>

                   </form>

               </div>




           </div>



       </div>
    </div>




</body>


<!-- scripts -->

<#--layui-->
<script src="${request.contextPath}/layui/layui.js"></script>
<#--js-->
<script src="${request.contextPath}/js/jquery.min.js"></script>


<script>


    // 引入弹出层
    var form = null;
    layui.use('form', function(){
        form = layui.form;

        /**
         * 监听提交,新增事件
         */
        form.on('submit(addEventOccur)', function(data){
            $.ajax({
                url:'/history/event/addEventOccur', //请求的url地址
                dataType:'json', //返回的格式
                data: $("#formEventOccur").serialize(),//参数值 {"id":"value"}
                type:'post', //请求的方式
                beforeSend:function(){ //请求前的处理
                    console.log("提交的数据:" + JSON.stringify(data.field))
                },
                success:function (req) {
                    if (req != null){
                        if (req.status === "success"){
                            layer.msg(req.msg);
                        } else {
                            layer.msg(req.msg);
                        }
                    } else {
                        console.log(req);
                    }
                },
                error:function (e) {
                    console.log(e);
                    layer.msg("未知错误");
                }
            });

            //返回false则不会重置
            return false;
        });
    });



</script>



</html>